<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="__PUBLIC__/js/jquery-1.9.0.js"></script>
    <script src="__PUBLIC__/js/angular.js"></script>
    <script src="__PUBLIC__/home/plugins/layer/layer.js"></script>
    <script src="__PUBLIC__/common.js"></script>
    <script src="__PUBLIC__/mui/js/mui.min.js"></script>


    <!--标准mui.css-->
    <link rel="stylesheet" href="__PUBLIC__/mui/css/mui.css">
    <!--App自定义的css-->
    <link rel="stylesheet" href="__PUBLIC__/css/app.css">
    <link rel="stylesheet" href="__PUBLIC__/css/index.css">
    <link rel="stylesheet" href="__PUBLIC__/css/new_z.css">
</head>
<body ng-app="myApp" ng-controller="productCtrl" ng-cloak>
<!--header-->
<header class="mui-bar mui-bar-nav">
    <a class=" mui-icon mui-icon-left-nav mui-pull-left" style="color: white;font-size: 24px; " href="javascript:history.go(-1);"></a>
    <h1 class="mui-title" style="color: white ">
        <div class="mui-input-row">
            <input id='check' type="text" class=" mui-input" style="color: #333333;width: 200px;height: 30px;" placeholder="商品名称" ng-model="messages">
        </div>
    </h1>
    <a class="mui-pull-right" style="color: #ffffff;font-size: 16px;line-height: 45px;" ng-click="search1()" href="javascript:void (0)">
        搜索
    </a>
</header>
<div style="height: 44px"></div>
<!--正文/商品-->
<div class="mui-content" style="padding-top: 0">
    <ul class="good"
        style="padding-left:0;display: flex; flex-flow: wrap;margin-top: 0%;margin-bottom: 1%;background: #FFFFFF; ">
        <li class="mui-table-view-cell mui-media mui-col-xs-6 goods-list" ng-repeat="pro in message"
            style="padding: 0;margin: 0">
            <a href="{:U('Product/index')}?id={{pro.id}}"
               style="margin: 0px 1.5px 3px 1.5px;background: white;padding: 3px">
                <div class="goods-image" ><img ng-src="{{pro.img}}" class="mui-col-xs-12"></div>
                <p class="mui-text-left goods-name" style="color:#4D4D4D;font-size: 15px;">{{pro.name}}</p>
                <p class="mui-text-left goods-price">￥{{pro.price}}</p>
            </a>
        </li>
    </ul>
</div>
<!--footer-->
</body>
<script>
    var app = getApp('myApp', []);
    app.controller('productCtrl', function($scope,$http) {
        $scope.kw = getUrlParam('kw');
        $scope.messages = $scope.kw;
        // 当前页数
        $scope.p = 0;
        // 加载完毕标志
        $scope.endflg =  0;
        // 防止重复加载
        $scope.busy = false;
        // 存放数据
        $scope.message = [];
        // 请求数据方法
        $scope.loadMore = function(){
//            console.log($scope.p)
            if($scope.endflg == 0){
                if($scope.busy){
                    return false;
                }
                $scope.busy = true;
                $http({
                    method:'GET',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    transformRequest: function(obj) {
                        var str = [];
                        for (var p in obj) {
                            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                        }
                        return str.join("&");
                    },
                    url: "/index.php/Home/Product/getProduct?p="+$scope.p+"&kw="+$scope.kw,
                }).then(function successCallback(response) {
                    // console.log(response.data.data);
                    $scope.busy = false;
                    if(response.data.data != '' && response.data.data != null){
                        if($scope.p > 0) {
                            layer.msg("正在加载...", {time: 500});
                        }
                    } else {
                        layer.msg("已加载完毕", {time:500});
                        $scope.endflg = 1;
                        return false;
                    }
                    $scope.p++;
                    if(response.data.code == -1){
                        layer.msg(response.data.msg,{time:1500})
                    }else{
                        if(response.data.data == null){
                            layer.msg(response.data.msg,{time:1500});
                        } else {
                            // 组织数据
                            for (var i in response.data.data) {
                                $scope.message.push(response.data.data[i]);
                            }
                        }
                    }
                }, function errorCallback(response) {
                    errorHandle(response);
                });
            }else{
                layer.msg("已加载完毕", {time:500});
            }
        };
        // 进页面先加载一次数据
        $scope.loadMore();

        $(window).scroll(function(){
            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(this).height();
            if(scrollTop + windowHeight == scrollHeight){
                $scope.loadMore();
            }
        });

        $scope.search1 = function (catename) {
            var url =  '/index.php/Home/Product/search?';
            $scope.checked = $scope.messages;
            if($scope.checked != '' && $scope.checked != null){
                url += '&kw='+$scope.checked;
                $scope.messages = $scope.checked;
            }
            window.location.href = url;
        }
    })
</script>
</html>